<template>
  <div class="Index">
    <div class="panel panel-primary login-panel">
      <div class="panel-heading">
        <h4 class="panel-title">后台登录系统</h4>
      </div>
      <div class="panel-body">
        <div class="alert alert-danger" v-if="errMes">{{errMes}}<span class="close" @click="errMes=''">&times;</span></div>
        <el-form ref="form" :model="loginForm" :rules="rules"  label-width="70px">
          <el-form-item label="登录名" prop="login">
            <el-input v-model="loginForm.login"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-row>
            <el-col :offset="18">
              <el-button @click="doLogin()">登录</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Login',
    data(){
      return {
        loginForm: {},
        errMes: '',
        rules: {
          login: {required: true, message: '登录名不能为空'},
          password: {required: true, message: '密码不能为空'},
        }
      }
    },
    methods: {
      doLogin(){
        this.$refs.form.validate(valid => {
//              console.log(valid);valid拿到的表单提交false或者true
          if (!valid) {//如果验证不通过
            return;
          }
          this.$http.post('/login', this.loginForm)
            .then(resp => {
              let data = resp.data;
//                console.log(data);拿到后台返回的消息
              if (data.status == true){
                  localStorage.name=data.user.name;
                  localStorage.menuHtml = menuHtml(data.menuData);
                this.$router.push('/zhuye');
              } else {
                this.errMes = data.error;
              }
            })
        })
      }
    }
  }
    function menuHtml(menuData){
      var html='';
        for(let md of menuData){
          html +=`<li class="diyi"><a href="#${md.path}">${md.title}</a>`
          if(md.children && md.children.length>0){
            html +=`<ul class="dier">${menuHtml(md.children)}</ul>`
          }
          html +=`</li>`
//          html +=`<el-dropdown split-button><div style="width: 139px"><a href="#${md.path}">${md.title}</a></div>`;
//          if(md.children && md.children.length>0){
//              html +=`<el-dropdown-menu slot="dropdown" style="margin-left: -10px;width: 200px;margin-top: 0px;background-color: #fff;border-radius: 3px">
//                        <div style="width: 200px;text-align: center;color: black;">
//                        <el-dropdown-item>${menuHtml(md.children)}</el-dropdown-item></div> </el-dropdown-menu>`
//          }
//          html +=`</el-dropdown>`
//        console.log(md.title);
      }
          return html;
  }
</script>
<style lang="less">
  body{background-color:white}
  .Index{
    width: 100%;height: 100%;
  }
  .panel{width: 400px;margin: auto;margin-top: 150px;}
  body{width: 100%;height: 100%}
</style>
